<template>
  <div id="alipay_container">
    <h1>支付宝支付测试</h1>
    <form @submit.prevent="submitPayment">
      <div class="form-group">
        <label for="alipayTraceNo">支付宝交易号：</label>
        <input type="text" id="alipayTraceNo" v-model="form.alipayTraceNo" required />
      </div>
      <div class="form-group">
        <label for="subject">支付说明：</label>
        <input type="text" id="subject" v-model="form.subject" required />
      </div>
      <div class="form-group">
        <label for="totalAmount">支付金额：</label>
        <input type="number" id="totalAmount" v-model="form.totalAmount" step="0.01" required />
      </div>
      <div class="form-group">
        <label for="traceNo">订单号：</label>
        <input type="text" id="traceNo" v-model="form.traceNo" required />
      </div>
      <button type="submit" class="submit-btn">提交支付</button>
    </form>
  </div>
</template>

<script setup>
import axios from 'axios';

// 表单数据
const form = {
  alipayTraceNo: 'alipayTraceNo20241215ss1a1',
  subject: '支付测试',
  totalAmount: 0.1,
  traceNo: 'traceNo20241215122100000',
};

// 提交支付请求
const submitPayment = async () => {
  const url = `http://localhost:9078/alipay/pay?alipayTraceNo=${form.alipayTraceNo}&subject=${encodeURIComponent(form.subject)}&totalAmount=${form.totalAmount}&traceNo=${form.traceNo}`;
  try {
    const response = await axios.get(url, { responseType: 'text' }); // 接收 HTML 表单作为字符串
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = response.data; // 插入返回的 HTML 表单
    document.body.appendChild(tempDiv);
    tempDiv.querySelector('form').submit(); // 自动提交表单
  } catch (error) {
    alert(`支付请求失败：${error.message}`);
  }
};

</script>

<style scoped>
#alipay_container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #0056b3;
}
</style>
